<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/styles.css" />
    <title>朝堂弈</title>

    <script src="./js/lib/howler-2.2.3.min.js"></script>
    <script src="./js/lib/jquery-3.7.1.min.js"></script>
    <script src="./js/lib/socket.io-4.5.4.min.js"></script>

</head>

<body>
    <div id="container" class="container">


        <!-- 主菜单 -->
        <div id="main" class="section active">
            <div class="header">
                <h1>朝堂弈</h1>
                <h6>作者: 麦穗</h6>
            </div>
            <div class="main-menu">
                <div class="input-group">
                    <label for="ipInput">服务器地址</label>
                    <input type="text" id="ipInput" placeholder="输入服务器IP地址" value="localhost:3000">
                </div>
                <div class="input-group">
                    <label for="roomInput">房间名称</label>
                    <input type="text" id="roomInput" placeholder="输入房间名称" value="room">
                </div>
                <div class="input-group">
                    <label for="nameInput">玩家名称</label>
                    <input type="text" id="nameInput" placeholder="输入你的名字" value="初夏">
                </div>
                <button id="connect" class="btn">连接服务器</button>
                <div class="server-msg" id="server-msg"></div>
            </div>
        </div>

        <!-- 多人房间 -->
        <div id="room" class="section"><!--整个div-->
            <!--在这个地方添加一个玩家栏-->
            <div class="gamemain">
                <div class="gameconfig">

                    <h2 style="text-align: center;">基础配置</h2>
                    <!--<div><input type="checkbox" id="checkbox1" name="checkbox1" value="value1">是否打开巴拉巴拉</div><div>-->
                </div>



                <div id="departments" class="departments"></div><!--更改职业选择的框也改一下-->
                <!--改动-加一个配置界面-->
                <div class="gameplayer">
                    <!--<div>玩家: --------------------状态: 在线--准备: 是</div>-->
                </div>
                <div class="gameuiplay">
                    <button style="margin-top: 10%;" id="start" class="btn" disabled>开始多人游戏</button>
                </div>
                <div class="server-msg" id="server-msg"></div>

            </div>
        </div>

        <!--游戏界面-->
        <div id="game" class="section">
            <div id="global-data" class="global-data"></div>
            
            <div class="game-container" style="width: 100%;">
               
                <div id="local-data" class="local-data"></div>
                <div id="game-desktop" class="game-desktop"></div>
                <div class="event-log" id="event-log">
                    <h3>朝堂记事</h3>
                    <div id="event-content"></div>

                </div>
            </div>



            <div class="hand-container">
                <div class="hand-header" id="card-header">
                    <h2>手牌区</h2>
                    <div>行动点数: <span id="actions-left">0</span></div>
                </div>
                <div class="hand-cardslls">
                    <div class="hand-cards" id="hand">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/core.js"></script>
    <script src="js/main.js"></script>
</body>

</html>